<template>
  <div class="dialog-container">
    <el-dialog
      :title="dialogType==='add'?'添加项目部':dialogType === 'detail'?'任务项目部':'修改项目部'"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
        :disabled="dialogType === 'detail'"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="经纬度：">
              <el-input v-model="dataForm.coordinate" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button size="mini" @click="mapDialogVisible = true">点击地图</el-button>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排口地址详细" prop="addressDetails">
              <el-input v-model="dataForm.addressDetails" placeholder="请输入排口地址详细" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
      <el-dialog
        title="地图"
        :visible.sync="mapDialogVisible"
        width="40%"
        append-to-body
        @opened="addMarker"
        @close="removeOverlay"
      >
        <el-form class="dialog-form" label-width="100px">
          <el-row>
            <el-col :span="18">
              <el-form-item label="地理坐标：">
                <el-input v-model="coordinate" readonly />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <BaiduMap
          ref="map"
          @setPonit="setPonit"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="mapDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="selectMap()">确定</el-button>
        </span>
      </el-dialog>
    </el-dialog>

  </div>
</template>

<script>
import { add, edit } from '@/api/info/projectDepartment'
import BMap from 'BMap'
import BaiduMap from '@/components/BaiduMap/index'

export default {
  name: 'AddProjectDepartmentDialog',
  components: { BaiduMap },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'detail'
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        name: null,
        coordinate: null,
        addressDetails: null
      },
      mapDialogVisible: false,
      coordinate: '',
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
    initData() {
      if (this.obj) {
        this.dataForm = JSON.parse(JSON.stringify(this.obj))
        this.coordinate = this.dataForm.coordinate
        this.addressDetails = this.dataForm.addressDetails
      }
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          if (this.dialogType === 'add') {
            add(this.dataForm).then(() => {
              this.$message.success('成功')
              this.$emit('closeDialog')
              this.$emit('flushPage')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          } else if (this.dialogType === 'update') {
            edit(this.dataForm).then(() => {
              this.$message.success('成功')
              this.$emit('closeDialog')
              this.$emit('flushPage')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    selectMap() {
      this.dataForm.coordinate = this.coordinate
      this.dataForm.addressDetails = this.addressDetails
      this.mapDialogVisible = false
    },
    setPonit(data) {
      this.coordinate = data.point.lng + ',' + data.point.lat
      const geoc = new BMap.Geocoder()
      const ponit = new BMap.Point(data.point.lng, data.point.lat)
      geoc.getLocation(ponit, (res) => {
        this.addressDetails = res.address
      })
    },
    addMarker() {
      if (this.dataForm.coordinate === '' || this.dataForm.coordinate === null) {
        return
      }
      const gps = this.dataForm.coordinate.split(',')
      this.$refs.map.addMarker(gps[0], gps[1])
    },
    removeOverlay() {
      this.$refs.map.removeOverlay()
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
      this.$refs['form'].clearValidate()
    },
    clearData() {
      this.dataForm = {
        name: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
